<?php
/**
 * Created by PhpStorm.
 * User: wodrow
 * Date: 19-6-21
 * Time: 下午2:59
 */

/**
 * @var \yii\web\View $this
 */

use wodrow\yii2wtools\tools\JsBlock;

?>

<div class="site-test">
    <div id="app">
        <select name="car_use_type" v-model="car_use_type" @change="getSeries">
            <option value="cyc">乘用车</option>
            <option value="syc">商用车</option>
        </select>
        <select name="series" v-model="series" style = "width:200px;">
            <option v-for="s in allSeries" :value="s.cs_car_text">{{s.cs_car_text}}</option>
        </select>
        <select name="model" v-model="model"  style = "width:300px;">
            <option v-for="m in allModels" :value="m.model_name">{{s.model_name}}</option>
        </select>
    </div>
</div>

<?php JsBlock::begin(); ?>
<script>
    toastr.options = {
        "closeButton": false,//显示关闭按钮
        "debug": false,//启用debug
        "positionClass": "toast-top-center",//弹出的位置
        "showDuration": "300",//显示的时间
        "hideDuration": "1000",//消失的时间
        "timeOut": "5000",//停留的时间
        "extendedTimeOut": "1000",//控制时间
        "showEasing": "swing",//显示时的动画缓冲方式
        "hideEasing": "linear",//消失时的动画缓冲方式
        "showMethod": "fadeIn",//显示时的动画方式
        "hideMethod": "fadeOut"//消失时的动画方式
    };
    var app = new Vue({
        el: "#app",
        data: {
            uid: 1,
            bank_id: 11,
            car_use_type: 'cyc',
            allSeries: [],
            series: '',
            allModels: [],
            model: ''
        },
        mounted: function(){
            $('select').select2();
        },
        methods: {
            getSeries: function () {
                this.allSeries.splice(0);
                axios.post('/chedai/car/get-all-car-series1', {
                    uid: this.uid,
                    bank_id: this.bank_id,
                    car_use_type: this.car_use_type
                }).then(function (response) {
                    if (response.data.code !== 200) {
                        toastr.error(response.data.message);
                    } else {
                        response.data.data.all_series.forEach(function (v) {
                            app.allSeries.push(v);
                        });
                    }
                }).catch(function (error) {
                });
            },
            log: function (v) {
                console.log(v);
            }
        }
    });
</script>
<?php JsBlock::end(); ?>
